<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>Buttons - jQuery Mobile Demos</title>

	<link rel="stylesheet" href="css/themes/default/silverbell.css" />
        <link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.3.2.min.css" />
	<link rel="stylesheet" href="_assets/css/jqm-demos.css">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
	<script src="js/jquery.js"></script>
	<script src="_assets/js/index.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
        
<script src="js/swipe-page.js"></script>
<link rel="stylesheet" href="js/swipe-page.css">
	<style>

#welcome{

background-image:url("images/bgmain.jpg");
background-size:cover;  

}
#switchpanel{
-webkit-border-bottom-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-moz-border-radius-bottomright: 12px;
-moz-border-radius-bottomleft: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
margin-right:2px;
}
</style>
  <script type="text/javascript"

      src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyAUU7fxPxVpieI7lSHpw3uwp4ukmI8otqI&sensor=true">

    </script>

		
		<script type="text/javascript" src="js/underscore-1.2.2/underscore.min.js"></script>
		<script type="text/javascript" src="js/backbone-0.5.3/backbone.min.js"></script>
		<script type="text/javascript" src="js/prettify/prettify.min.js"></script>
		<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.overlays.js"></script>
<script src="js/android.js"></script>
<script>
var CONFIG={"city":"http://code.whereismyanmar.net/php.php?query=arrival|origin","origin":"ORG","destination":"DES",
"flight":"FLI",
"airline":"AIL"}
$(document ).on( "pageinit", "#welcome", function() {

$( "#accArrival" ).trigger( "expand" );
$.getJSON( CONFIG.city)
.done(function( data) {
var c=JSON.stringify(data.arrival.city);
localStorage.arrivalCity=c;
localStorage.arrivalAirline=JSON.stringify(data.arrival.carrier);;
localStorage.arrivalFlight=JSON.stringify(data.arrival.flight);;
localStorage.departureCity=JSON.stringify(data.departure.city);;
localStorage.departureFlight=JSON.stringify(data.departure.flight);;
localStorage.departureAirline=JSON.stringify(data.departure.carrier);
localStorage.tomorrow=data.next;
localStorage.yesterday=data.previous;
localStorage.anc1=data.anc1;
localStorage.anc2=data.anc2;
localStorage.anc3=data.anc3;
localStorage.anc4=data.anc4;

$('#anc1').html(localStorage.anc1);

$('#anc2').html(localStorage.anc2);

$('#anc3').html(localStorage.anc3);

})
.fail(function( jqxhr, textStatus, error ) {
    alert(error);
});


   
		$( "#navaleft").bind( "click", function (event,ui) {
						
				         event.stopImmediatePropagation();
		                         event.preventDefault();
		$('#btnCity').text("Search by Destination");
		                       $("a[href='#selectarrivalflight']").attr('href', '#selectdepartureflight') 
		                     $("a[href='#selectarrivalcity']").attr('href', '#selectdeparturecity') 
		                      $("a[href='#selectarrivalairline']").attr('href', '#selectdepartureairline') 
						
					});
					
					$( "#navaarrival").bind( "click", function (event,ui) {
						
				         event.stopImmediatePropagation();
		                         event.preventDefault();
		$('#btnCity').text("Search by Origin");
		                    $("a[href='#selectdepartureflight']").attr('href', '#selectarrivalflight') 
		                     $("a[href='#selectdeparturecity']").attr('href', '#selectarrivalcity') 
		                      $("a[href='#selectdepartureairline']").attr('href', '#selectarrivalairline') 
						
					});
		
		
		 $( document ).on( "swiperight", "#detail1", function() {
		
		            $.mobile.changePage( "#arrival", { transition: "slide", reverse: true } );
		        });
				
				
				

$(document).bind( "pagebeforechange", function( e, data ) {
	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.

	if ( typeof data.toPage === "string" ) {
		
		var u = $.mobile.path.parseUrl( data.toPage ),
			re = /^#selectdeparturecity/;

		if ( u.hash.search(re) !== -1 ) {
		
			showCategory( u, data.options,localStorage.departureCity ,CONFIG.destination+CONFIG.destination);		
			e.preventDefault();
		}
		else if( u.hash.search(/^#selectdepartureflight/) !== -1 ) {
		
			showCategory( u, data.options,localStorage.departureFlight,CONFIG.destination+CONFIG.flight);			
			e.preventDefault();
		}
		else if ( u.hash.search(/^#selectdepartureairline/) !== -1 ) {
		
			showCategory( u, data.options,localStorage.departureAirline,CONFIG.destination+CONFIG.airline);		
			e.preventDefault();
		}
		else if ( u.hash.search(/^#selectarrivalcity/) !== -1 ) {
		
			showCategory( u, data.options,localStorage.arrivalCity,CONFIG.origin+CONFIG.origin);				
			e.preventDefault();
		}
		else if ( u.hash.search(/^#selectarrivalflight/) !== -1 ) {
		
			showCategory( u, data.options,localStorage.arrivalFlight,CONFIG.origin+CONFIG.flight);				
			e.preventDefault();
		}
		else if ( u.hash.search(/^#selectarrivalairline/) !== -1 ) {
		
			showCategory( u,data.options,localStorage.arrivalAirline,CONFIG.origin+CONFIG.airline);				
			e.preventDefault();
		}
	}
});
		


});


function showCategory( urlObj, options,list,request )
{
	//var categoryName = urlObj.hash.replace( /.*category=/, "" ),

		items = JSON.parse(list);

		pageSelector = urlObj.hash.replace( /\?.*$/, "" );

	if ( true ) {
		// Get the page we are going to dump our content into.
		var $page = $( "#selector" ),

			// Get the header for the page.
			$header = $page.children( ":jqmData(role=header)" ),

			// Get the content area element for the page.
			$content = $page.children( ":jqmData(role=content)" ),

			// The markup we are going to inject into the content
			// area of the page.
			
markup=' <ul data-role="listview" id="selection"   data-filter="true" data-filter-placeholder="Search flight..." data-inset="true">';

for ( var i = 0; i < items.length; i++ ) {
			markup += '<li data-filtertext="'+items[i].value+'" data-query="'+request+items[i].value+'"><a href="#arrival">'+items[i].value+'</a>'+ '</li>';
		}
		markup += '</ul>';
			

		$header.find( "h1" ).html( "Search Flights");

		// Inject the category items markup into the content element.
		$content.html( markup );

		
		$page.page();

		
		$content.find( ":jqmData(role=listview)" ).listview();
                $content.find( "li" ).on("tap",function(event){

                 localStorage.query=$(this).data("query");


});
		
		options.dataUrl = urlObj.href;

		
		$.mobile.changePage( $page, options );
	}
}

$(document ).on( "pageinit", "#selector", function() {
				
					
					

});
function filter($li,value)
{

   $li.each(function( index ) {

if ( $(this).text().toUpperCase().search(value.toUpperCase()) !== -1 ) {
		$(this).show();
			
		}
else{

$(this).hide();


}
if(value.trim()=="")
{
$(this).show();

}
console.log( index + ": " + $(this).text()+value );
});



}

</script>
</head>
<body>

<div data-role="page" id="welcome" data-theme="a" style="vertical-align:middle;">

	

	   <div data-role="content" class="backimg">
	    
<h3 style="color:#fffccc"> Yangon International Airport</h3>



<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-iconpos="right">
					<div id="accArrival" class="ui-btn-down-b" data-role="collapsible" data-iconpos="right">
						<h3>Arrival</h3>
						<p >  <a id="btnFlight" data-role="button" data-theme="b" href="#selectarrivalflight">
						   	         Search by Flight Number
						        </a>
						        <a  id="btnCity" data-role="button" data-theme="b" href="#selectarrivalcity">
						            Search By City (Origin)
						        </a>
						        <a data-role="button" data-theme="a" href="#selectarrivalairline">
						            Search By Airline
						        </a></p>
					</div>
					<div id="accDept" class="ui-btn-down-b" data-role="collapsible" data-iconpos="right">
						<h3>Departure</h3>
						<p> <a id="btnFlight" data-role="button" data-theme="b" href="#selectdepartureflight">
						   	         Search by Flight Number
						        </a>
						        <a  id="btnCity" data-role="button" data-theme="b" href="#selectdeparturecity">
						            Search By City (Destination)
						        </a>
						        <a data-role="button" data-theme="a" href="#selectdepartureairline">
						            Search By Airline
						        </a></p>
					</div>
					
				</div>

<p><div id="anc1"></div> </p>



    </div>

 <div data-role="panel" id="defaultpanel" data-theme="b">	
<div class="panel-content">
<h3>Default panel options</h3>
<p>This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em>before</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
<a href="#demo-links" data-rel="close" data-role="button" data-theme="c" data-icon="delete" data-inline="true">Close panel</a>
</div><!-- /content wrapper for padding -->
</div><!-- /defaultpanel -->


</div><!-- /page -->


<div data-role="page" id="arrival" data-theme="b" data-dom-cache="false">

	<div data-role="header">
		<h1 id="listTitle">Arrival</h1>
		<a href="#welcome" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
	</div><!-- /header -->

	<div data-role="content" class="jqm-content">
<div data-role="fieldcontain">
			    <fieldset data-role="controlgroup" data-type="horizontal">
			     	
			         	<input type="radio" name="choice-day" id="radio-choice-c" value="yesterday"  />
			         	<label for="radio-choice-c" style="font-size:8pt;width:90px"><div id="yesterday" style="font-size:8pt">12 Jun</div></label>
			         	<input type="radio" name="choice-day" id="radio-choice-d" value="today"  checked="checked"/>
			         	<label for="radio-choice-d" style="font-size:8pt;width:90px"><div style="font-size:8pt">Today</div></label>
			         	<input type="radio" name="choice-day" id="radio-choice-e" value="tomorrow" />
			         	<label for="radio-choice-e" style="font-size:8pt;width:90px"><div id="tomorrow" style="font-size:8pt">14 Jun</div></label>
			    </fieldset>
			</div>
	<b><div id="date" style="font-size:8px;color:grey">  </div></b>
	<div>
				<ul id="arrival-board" data-role="listview" data-inset="true">
					
				</ul>
			</div>


<ul id="arrival-domestic" data-role="listview" data-inset="true"></ul>

		<p></p>
		
	</div><!-- /content -->

	<div data-role="footer" data-position="fixed" >
<p>	<a href="#" data-role="button" data-rel="back" data-icon="back" data-iconpos="notext" style="float:left">Back</a>
<a  id="anc2" style="float:left"></a> 
</p>
		
	</div><!-- /footer -->		


</div><!-- /page -->


<div data-role="page" id="departure">

	<div data-role="header">
		<h1>Departure</h1>
		<a href="#welcome" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
	</div><!-- /header -->

	<div data-role="content" class="jqm-content">
		<p></p>
		<p><table data-role="table" id="table-custom-3" class="ui-body-d ui-shadow table-stripe ui-responsive">
<thead>
<tr>
<th>Flight</th>
<th >Origin</th>
<th>Arrival</th>
<th>Status</th>
</tr>
</thead>

<tbody>
<tr>
<td>MI517</td>
<td>Singapore</td><td>14:00</td><td>Scheduled</td></tr>

<tr>
<td>MI517</td>
<td>Singapore</td><td>14:00</td><td>Scheduled</td></tr>

</tbody>


</table></p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="detail" data-prev="arrival" data-theme="c" >





	<div data-role="header" data-theme="b">
		<h1 id="detailHeader">Departure</h1>
		<a href="#welcome" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<button id="refresh" data-icon="refresh" data-mini="true" data-inline="true"  data-iconpos="notext">Refresh</button>
	</div><!-- /header -->

	<div data-role="content" class="jqm-content">
		<p><div id="selectedLogo"></div></p>
		<p><table data-role="table" id="table-custom-2" class="ui-body-d ui-shadow table-stripe ui-responsive">
<thead>
<tr>
<th>Flight</th>
<th id="header_1_d">Origin</th>
<th id="header_2_d">Arrival</th>
<th>Status</th>
</tr>
</thead>

<tbody>
<tr>
<td><div id="flight_d"/></td>
<td><div id="origin_d"/></td><td><div id="arrival_d"/></td><td><div id="status_d"/></td></tr>



</tbody>


</table></p>


<fieldset class="ui-grid-a">
	<div class="ui-block-a"> </div>
	<div class="ui-block-b"></div>	   
</fieldset>
	



<div id="mapcontainer" class="ui-bar-c ui-corner-all ui-shadow" style="height:1px">
					<div id="positionMap" ></div>
				</div>
	</div><!-- /content -->
<div data-role="footer" data-position="fixed">
	<p><a href="#" data-role="button" data-rel="back" data-icon="back" data-iconpos="notext" style="float:left">Back</a> 
		<a id="anc3" style="float:left"></a> </p>
	</div><!-- /footer -->		
	
</div><!-- /page -->

<div data-role="page" id="selector">

	<div data-role="header">
		<h1>A</h1>
		<a href="#welcome" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
	</div><!-- /header -->

	<div data-role="content" class="jqm-content">		
	</div><!-- /content -->

	<div data-role="footer">
		<h4></h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>